<script setup>
import { useTheme } from "@@/composables/useTheme"
import { useResizeObserver } from "@vueuse/core"
import * as echarts from "echarts"
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue"

// 组件属性
const props = defineProps({
  // 图表尺寸 - 现在是可选的，主要用于未设置容器大小时的后备
  width: {
    type: String,
    default: "100%" // 默认为 100%，让其根据父容器伸缩
  },
  height: {
    type: String,
    default: "100%" // 默认为 100%，让其根据父容器伸缩
  },
  // 图表数据
  chartData: {
    type: Object,
    required: true,
    default: () => ({
      xData: [],
      seriesData: []
    })
  },
  // 图表类型
  chartType: {
    type: String,
    default: "line"
  },
  // 图表标题
  title: {
    type: String,
    default: ""
  },
  // X轴名称
  xAxisName: {
    type: String,
    default: ""
  },
  // Y轴名称
  yAxisName: {
    type: String,
    default: ""
  },
  // 图例位置
  legendPosition: {
    type: Object,
    default: () => ({ right: 10, top: "top" })
  },
  // 网格配置
  gridConfig: {
    type: Object,
    default: () => ({ left: "3%", right: "4%", bottom: "3%", top: "15%" })
  },
  // Y轴动态范围配置
  yAxisConfig: {
    type: Object,
    default: () => ({
      dynamicRange: true, // 是否启用动态范围
      marginPercent: 0.1, // 上下边距百分比
      minValue: null, // 强制最小值，如果设置则覆盖动态计算
      maxValue: null, // 强制最大值，如果设置则覆盖动态计算
      includeZero: false // 是否强制包含0值
    })
  },

  
  // 新增：处理空数据的配置
  dataConnectConfig: {
    type: Object,
    default: () => ({
      connectNulls: true, // 是否连接空数据点
     
      showSymbol: true, // 在空数据点位置是否显示符号
    })
  },
  // 自定义颜色配置
  colors: {
    type: Array,
    default: () => [] // 空数组表示使用默认颜色
  }
})

const chartRef = ref(null)
let myChart = null
const { activeThemeName } = useTheme()

// 根据主题获取颜色配置
const themeColors = computed(() => {
  const isDark = activeThemeName.value === "dark" || activeThemeName.value === "dark-blue"
  return {
    backgroundColor: isDark ? "#151224" : "#ffffff",
    textColor: isDark ? "#ffffff" : "#333333",
    axisLineColor: isDark ? "#ffffff" : "#333333",
    splitLineColor: isDark ? "#2d2a3b" : "#e0e0e0"
  }
})

// 处理数据中的空值
const processSeriesData = (seriesData) => {
  if (!seriesData || !Array.isArray(seriesData)) return seriesData

  return seriesData.map(series => {
    const processedData = [...(series.data || [])]
    
    
    
    return {
      ...series,
      data: processedData,
      // 标记原始数据中的空值位置
      _originalData: series.data || []
    }
  })
}

// 计算数据的动态范围（修改版，过滤空值）
const calculateDataRange = (seriesData) => {
  if (!seriesData || seriesData.length === 0) {
    return { min: 0, max: 100 }
  }

  // 获取所有系列的所有有效数据点（过滤空值）
  const allDataPoints = seriesData.flatMap(series => {
    const data = series.data || []
    return data.filter(value => value !== null && value !== undefined && !isNaN(value))
  })

  if (allDataPoints.length === 0) {
    return { min: 0, max: 100 }
  }

  let min = Math.min(...allDataPoints)
  let max = Math.max(...allDataPoints)

  // 如果所有数据点都相同，创建一个合理的范围
  if (min === max) {
    min = min === 0 ? -10 : min * 0.9
    max = max === 0 ? 10 : max * 1.1
  } else {
    // 计算数据范围
    const range = max - min
    const margin = range * props.yAxisConfig.marginPercent
    
    // 应用边距
    min = min - margin
    max = max + margin
    
    // 如果配置了强制包含0，则调整范围
    if (props.yAxisConfig.includeZero) {
      min = Math.min(min, 0)
      max = Math.max(max, 0)
    }
  }

  // 如果配置了强制的最小值/最大值，则覆盖计算值
  if (props.yAxisConfig.minValue !== null) {
    min = props.yAxisConfig.minValue
  }
  if (props.yAxisConfig.maxValue !== null) {
    max = props.yAxisConfig.maxValue
  }

  return { min, max }
}

// 计算图表配置选项
const chartOptions = computed(() => {
  const colors = themeColors.value

  const baseOptions = {
    title: {
      text: props.title,
      textStyle: {
        color: colors.textColor
      }
    },
    backgroundColor: colors.backgroundColor,
    textStyle: {
      color: colors.textColor
    },
    // 如果提供了自定义颜色，则使用自定义颜色
    ...(props.colors && props.colors.length > 0 && { color: props.colors }),
    tooltip: {
      trigger: props.chartType === "pie" ? "item" : "axis",
      // 增强tooltip显示，处理空值情况
      formatter: (params) => {
        if (props.chartType === "pie") {
          return `${params.name}: ${params.value}`
        }
        
        let result = `${params[0].axisValue}<br/>`
        params.forEach(item => {
          const value = item.value
          const displayValue = (value === null || value === undefined || isNaN(value)) 
            ? '无数据' 
            : value
          result += `${item.marker} ${item.seriesName}: ${displayValue}<br/>`
        })
        return result
      }
    },
    legend: {
      orient: props.chartType === "pie" ? "vertical" : "horizontal",
      ...props.legendPosition,
      data: props.chartData.seriesData.map(series => series.name),
      textStyle: {
        color: colors.textColor
      }
    }
  }

  if (props.chartType === "pie") {
    return {
      ...baseOptions,
      series: props.chartData.seriesData.map((series, index) => ({
        name: series.name,
        type: "pie",
        data: props.chartData.xData.map((name, i) => ({
          name,
          value: series.data[i] || 0
        })),
        radius: "50%",
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }))
    }
  } else {
    // 处理数据
    const processedSeriesData = processSeriesData(props.chartData.seriesData)
    
    // 计算Y轴动态范围
    const yAxisRange = props.yAxisConfig.dynamicRange 
      ? calculateDataRange(processedSeriesData)
      : { min: null, max: null }

    return {
      ...baseOptions,
      grid: {
        ...props.gridConfig,
        containLabel: true
      },
      xAxis: {
        type: "category",
        boundaryGap: props.chartType === "bar",
        name: props.xAxisName,
        nameTextStyle: {
          color: colors.textColor
        },
        data: props.chartData.xData,
        axisLine: {
          lineStyle: {
            color: colors.axisLineColor
          }
        },
        axisLabel: {
          color: colors.textColor
        }
      },
      yAxis: {
        type: "value",
        name: props.yAxisName,
        nameTextStyle: {
          color: colors.textColor
        },
        axisLine: {
          lineStyle: {
            color: colors.axisLineColor
          }
        },
        axisLabel: {
          color: colors.textColor,
          // 格式化Y轴标签，处理异常值
          formatter: (value) => {
            if (isNaN(value) || !isFinite(value)) return ''
            return value.toFixed(2)
          }
        },
        // 动态设置Y轴范围
        ...(yAxisRange.min !== null && { min: yAxisRange.min }),
        ...(yAxisRange.max !== null && { max: yAxisRange.max }),
        splitLine: {
          lineStyle: {
            color: colors.splitLineColor,
          }
        }
      },
      series: processedSeriesData.map((series, index) => {
        const baseSeriesConfig = {
          name: series.name,
          type: props.chartType,
          data: series.data,
          symbol: 'circle',
          symbolSize: 8,
          // 关键配置：连接空数据点
          connectNulls: props.dataConnectConfig.connectNulls,
          lineStyle: { 
            ...(series.lineStyle || {}), 
            type: "solid" 
          },
          itemStyle: {
            ...(series.itemStyle || {}),
            color: series.itemStyle?.color || undefined,
            borderWidth: 0
          },
          // 针对柱状图的特殊配置
          ...(props.chartType === "bar" && {
            barWidth: '60%'
          })
        }

        // 对于线图，特别处理空数据的显示
        if (props.chartType === 'line') {
          // 在空数据点位置控制符号显示
          baseSeriesConfig.showSymbol = props.dataConnectConfig.showSymbol
          
          // 如果有原始空数据标记，可以进一步定制空数据点的样式
          if (series._originalData) {
            baseSeriesConfig.data = series.data.map((value, idx) => {
              const originalValue = series._originalData[idx]
              const isNullValue = originalValue === null || originalValue === undefined || isNaN(originalValue)
              
              return {
                value: value,
                // 为空数据点设置特殊样式
                itemStyle: isNullValue ? {
                  color: '#ff6b6b',
                  borderColor: '#ff6b6b',
                  opacity: 0.6
                } : undefined,
                symbol: isNullValue ? 'emptyCircle' : 'circle',
                symbolSize: isNullValue ? 6 : 8
              }
            })
          }
        }

        return baseSeriesConfig
      })
    }
  }
})

// 初始化图表
function initChart() {
  if (chartRef.value) {
    try {
      const theme = activeThemeName.value === "normal" ? null : "dark"
      myChart = echarts.init(chartRef.value, theme, { renderer: "canvas" })
      renderChart()
      myChart.resize()
    } catch (error) {
      console.error("图表初始化失败，详细错误:", error)
      console.log("当前图表配置:", chartOptions.value)
    }
  }
}

// 渲染图表
function renderChart() {
  if (!myChart) return
  myChart.setOption(chartOptions.value, true)
}

// 调整图表大小
function onResize() {
  if (myChart) {
    myChart.resize()
  }
}

// 组件挂载时初始化图表
onMounted(async () => {
  await nextTick()
  initChart()
  useResizeObserver(chartRef, onResize)
})

// 组件卸载时清理资源
onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
})

// 监听数据变化
watch(
  () => props.chartData,
  () => {
    if (myChart) {
      try {
        renderChart()
      } catch (error) {
        console.error("图表渲染失败，详细错误:", error)
        console.log("当前图表配置:", chartOptions.value)
      }
    } else {
      console.warn("图表未初始化，无法渲染新数据")
    }
  },
  { deep: true }
)

// 监听主题变化
watch(
  activeThemeName,
  () => {
    if (myChart) {
      myChart.dispose()
      initChart()
    }
  }
)

// 监听Y轴配置变化
watch(
  () => props.yAxisConfig,
  () => {
    if (myChart) {
      renderChart()
    }
  },
  { deep: true }
)

// 监听数据连接配置变化
watch(
  () => props.dataConnectConfig,
  () => {
    if (myChart) {
      renderChart()
    }
  },
  { deep: true }
)

// 监听颜色配置变化
watch(
  () => props.colors,
  () => {
    if (myChart) {
      renderChart()
    }
  },
  { deep: true }
)
</script>

<template>
  <div ref="chartRef" class="chart-container" />
</template>

<style scoped lang="scss">
.chart-container {
  height: 100%;
  width: 100%;
}
</style>
